<template>
  <div id="backgroup">
    <div class="background">
      <div style="color: white "><h1 style="font-size: 30px;font-family: 宋体;text-align: center"><span>宠物领养平台</span></h1></div>
      <van-form @submit="handleLogin()" :rules="loginRules" ref="loginForm">
        <template v-if="loginPass">
          <van-field left-icon="user-circle-o"
                     v-model="loginForm.username"
                     name="账号"
                     label=""
                     placeholder="请输入用户名"
                     :rules="[{ required: true}]"
          />
          <van-field left-icon="smile-o"
                     v-model="loginForm.password"
                     type="password"
                     name="密码"
                     label=""
                     placeholder="请输入密码"
                     :rules="[{ required: true  }]"/>

          <van-row style=" margin-top: 10px;">
            <van-col span="13">
              <van-field left-icon="smile-o"
                         v-model="loginForm.code"
                         name=""
                         label=""
                         placeholder="请输入验证码"
                         :rules="[{ required: true  }]"
              />
            </van-col>
            <van-col span="11">
              <img :src="require('../assets/login/authImg.gif')" class="login-code-img" style="height: 40px; width: 90%; margin-left: 10px;margin-top:2px"/>
            </van-col>
          </van-row>
        </template>

        <template v-else>
          <van-cell-group inset>
            <van-field
              v-model="loginForm.phone"
              name="账号"
              label=""
              placeholder="输入手机号码"
              :rules="[{ required: true}]"
            />
            <van-field class="addBtn"
                       v-model="loginForm.yzm"
                       type="password"
                       name="密码"
                       label=""
                       placeholder="验证码"
                       :rules="[{ required: true  }]">
            </van-field>

          </van-cell-group>
        </template>

        <van-row>
          <van-col span="12">
            <van-checkbox v-model="loginForm.rememberMe" shape="square" icon-size="15px" class="rememberCheck">记住密码
            </van-checkbox>
          </van-col>
        </van-row>

        <div style="margin: 16px auto;">
          <van-button square block type="info" native-type="submit" class="image-cover">
            <span v-if="!loading">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</span>
            <span v-else>登 录 中...</span>
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      captchaOnOff: true,
      loading: false,
      redirect: undefined,
      loginPass: true,
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: '',
        yzm: ''
      },
      loginRules: {
        username: [
          {required: true, trigger: 'blur', message: '请输入您的账号'}
        ],
        password: [
          {required: true, trigger: 'blur', message: '请输入您的密码'}
        ],
        code: [
          {required: true, trigger: 'blur', message: '请输入验证码'}
        ]
      }
    }
  },
  methods:{
    handleLogin(){
      this.$router.push('/Home')
    }
  }
}
</script>

<style scoped>
.rememberCheck {
  margin-left: 16px;
  margin-top: 8px;
}

#backgroup {
  background: url("../assets/login-homepage.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.background {
  margin-left: 50px;
  margin-right: 50px;
  height: 100%;
  margin-top: 50%;
  color: #ffffff;
}

.image-cover {
  position: relative;
  color: #ffffff;
  background: rgba(8, 48, 84, 0.8);
}
.van-button--info {
  border: 0;
}
.van-checkbox__label {
  margin-left: 8px;
  color: #ffffff;
  line-height: 20px;
}
</style>
